import React, { Component } from "react";
import './index.css'
import { NavLink, Switch, Route, Redirect } from "react-router-dom";
import {ShopOutlined,AppstoreOutlined,ShoppingCartOutlined,UserOutlined  } from '@ant-design/icons';
const Home = React.lazy(() => import("../home/index"));
const Cates = React.lazy(() => import("../cates/Index"));
const ShopCar = React.lazy(() => import("../shopCar/Index"));
const My = React.lazy(() => import("../my/Index"));

export default class Index extends Component {
  render() {
    return (
      <div className="index">
        <React.Suspense fallback={<mark>loading...</mark>}>
          <Switch>
            <Route path="/index/home" component={Home}></Route>
            <Route path="/index/cates" component={Cates}></Route>
            <Route path="/index/shopCar" component={ShopCar}></Route>
            <Route path="/index/my" component={My}></Route>
            <Redirect path="*" to='/index/home'></Redirect>
          </Switch>
        </React.Suspense>
        <footer>
          <NavLink className="tabebar" to='/index/home'><ShopOutlined />商城</NavLink>
          <NavLink className="tabebar" to='/index/cates'><AppstoreOutlined />分类</NavLink>
          <NavLink className="tabebar" to='/index/shopCar'><ShoppingCartOutlined />购物车</NavLink>
          <NavLink className="tabebar" to='/index/my'><UserOutlined />我的</NavLink>
        </footer>
      </div>
    );
  }
}
